<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>聊天页面-信息列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f7f7f7;
            line-height: 1;
        }
        /*修改添加图标的颜色*/

        .plus_icon {
            font-size: 1rem!important;
            color: #000!important;
            font-weight: bold;
        }
        /*修改头部标题*/

        .header_title {
            font-size: 0.9rem;
            font-weight: bold;
        }
        /*固定头部*/

        .header {
            position: fixed!important;
            background-color: #fff;
            border: none!important;
            z-index: 8!important;
        }

        /*列表项*/

        .list_box {
            background-image: none;
            margin-top: 0.5rem;
        }

        .list_box li:last-child {
            background-image: none!important;
        }

        .list_box li .box {
            padding: 0.5rem 0px;
        }

        .list_left {
            position: relative;
            width: 2.5rem;
            height: 2.5rem;
        }

        .list_left img {
            border-radius: 0.1rem;
        }

        .list_left .tip_num {
            top: -0.4rem;
            left: 80%;
        }

        .list_right {
            flex: 1;
            margin: 0 0.75rem;
            line-height: 1.5;
        }

        .msg_name_time {
            display: flex;
            justify-content: space-between;
        }

        span.msg_name {
            font-size: 0.8rem;
            color: #333333;
            font-weight: bold;
        }

        .msg_cnt {
            font-size: 0.7rem;
            color: #666666;
        }

        span.msg_time {
            font-size: 0.6rem;
            color: #999999;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav header" id='header' style="padding-top:25px;">
      <a class="aui-pull-left aui-btn aui-btn-outlined" onclick="api.closeWin()">
          <span class="aui-iconfont aui-icon-left plus_icon"></span>
      </a>
        <div class="aui-title header_title">消息</div>
        <a class="aui-pull-right aui-btn aui-btn-outlined">
            <!-- <span class="aui-iconfont aui-icon-plus plus_icon"></span> -->
        </a>
    </header>



    <div class="chat_list xt_msg_box" v-cloak>
        <div class="aui-refresh-content" style="height:85vh;">
            <!-- <div class="search_box" onclick="open_search_win()">
                <img src="../../image/four/search.png" alt="">
                <span>搜索</span>
            </div> -->
            <ul class="aui-list aui-list-in list_box">
                <li class="aui-list-item " onclick="open_new_win('thr','系统消息','清空','')">
                    <div class="aui-list-item-inner box">
                        <div class="list_left">
                            <img src="../../image/four/xtxx.png" alt="">
                            <div v-if="xt_msg.count!=0" class="aui-badge tip_num">{{xt_msg.count}}</div>
                        </div>
                        <!-- 如果存在系统消息 -->
                        <div v-if="xt_msg.count!=0" class="list_right">
                            <div class="msg_name_time">
                                <span class="msg_name">系统消息</span>
                                <span class="msg_time">{{xt_msg.addtime}}</span>
                            </div>
                            <div class="msg_cnt">
                                {{xt_msg.title}}
                            </div>
                        </div>
                        <div v-else class="list_right">
                            <div class="msg_name_time">
                                <span class="msg_name">系统消息</span>
                                <span class="msg_time"></span>
                            </div>
                            <div class="msg_cnt">
                                {{xt_msg.title}}
                            </div>
                        </div>
                    </div>
                </li>
                <li v-for="friend_msg in rong_msg_list3" v-if="friend_msg.datas" class="aui-list-item" @click="open_chat_win('single',friend_msg.datas.username,friend_msg.datas.user_id)">
                    <div class="aui-list-item-inner box">
                        <div class="list_left">
                            <!-- <img :src="friend_msg.datas.head_img" alt=""> -->
                            <div :style="'background:url('+friend_msg.datas.head_img+') no-repeat center/cover;width:2.5rem;height:2.5rem;'"></div>
                            <div v-show="friend_msg.unreadMessageCount!=0" class="aui-badge tip_num">{{friend_msg.unreadMessageCount}}</div>
                        </div>
                        <div class="list_right">
                            <div class="msg_name_time">

                                <span v-if="friend_msg.datas.remarks==''" class="msg_name">{{friend_msg.datas.username}}</span>
                                <span v-else class="msg_name">{{friend_msg.datas.remarks}}</span>

                                <span class="msg_time">{{friend_msg.sentTime | time}}</span>
                            </div>

                            <div v-if="friend_msg.objectName=='RC:TxtMsg'" class="msg_cnt" v-html="friend_msg.latestMessage.text"></div>
                            <div v-else-if="friend_msg.objectName=='RC:VcMsg'" class="msg_cnt">[语音]</div>
                            <div v-else-if="friend_msg.objectName=='RC:ImgMsg'" class="msg_cnt">[图片]</div>
                        </div>
                    </div>
                </li>

                <li v-for="group_data in group_list2" v-if="group_data.datas" class="aui-list-item" @click="open_chat_win('group',group_data.datas.name,group_data.datas.groupchat_id)">
                    <div class="aui-list-item-inner box">
                        <div class="list_left">
                            <div class="img_outer" :class="group_data.datas.list.length < 4 ? 'img_outer' + group_data.datas.list.length : 'img_outer4'">
                                <div v-for="img_src in group_data.datas.list" :style="'background:url('+img_src.head_img+') no-repeat center/cover'"></div>
                            </div>

                            <div v-show="group_data.unreadMessageCount!=0" class="aui-badge tip_num">{{group_data.unreadMessageCount}}</div>
                        </div>
                        <div class="list_right">
                            <div class="msg_name_time">
                                <span class="msg_name">{{group_data.datas.name}}</span>
                                <span class="msg_time">{{group_data.sentTime | time}}</span>
                            </div>

                            <div v-if="group_data.objectName=='RC:TxtMsg'" class="msg_cnt" v-html="group_data.latestMessage.text"></div>
                            <div v-else-if="group_data.objectName=='RC:VcMsg'" class="msg_cnt">[语音]</div>
                            <div v-else-if="group_data.objectName=='RC:ImgMsg'" class="msg_cnt">[图片]</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    var xt_msg_list;
    var rong
    apiready = function() {
        //获取header的高度
        var oHeader = $api.byId("header");
        var headerH = $api.offset(oHeader).h;
        $('.chat_list').css('padding-top', headerH);
        $('.search_box').css('top', headerH);

        // 设置状态栏文字颜色
        api.setStatusBarStyle({
            style: 'dark'
        });

        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });


        // 初始化融云
        rong = api.require('rongCloud2');
        rong.init(function(ret, err) {
            if (ret.status == 'success') {
                // console.log('初始化融云成功了')
            } else {
                api.toast({
                    msg: err.code
                });
            }
        });


        // 监听群聊以及单聊最新消息
        api.addEventListener({
            name: 'new_msg_event'
        }, function(ret, err) {
            if (ret) {
              if(ret.value.msg_num == 1) {
                xt_msg_list.get_all_msg(0);
              }
              xt_msg_list.numLength = ret.value.msg_num;
            } else {
                alert(JSON.stringify(err));
            }
        });


        // 连接融云
        rong.connect({
            token: $api.getStorage('rong-token')
        }, function(ret, err) {
            if (ret.status == 'success') {
                // console.log('融云连接成功——————————' + JSON.stringify(ret));
            } else {
                alert(err.code)
            }
        });

        // 获取未读消息总数
        rong.getUnreadCountByConversationTypes({
            conversationTypes: ['PRIVATE', 'GROUP']
        }, function(ret, err) {
            if (ret) {
                if (ret.result != 0) {
                    api.execScript({
                        name: 'four_frame/four_index.html',
                        script: 'add_tips_dot();'
                    });
                } else {
                    api.execScript({
                        name: 'four_frame/four_index.html',
                        script: 'remove_tips_dot();'
                    });
                }
            }
        })

        // 实例化vue 渲染系统信息数据
        xt_msg_list = new Vue({
            el: '.xt_msg_box',
            data: {
                xt_msg: {},
                user_id: 0,
                rong_msg_list: [],
                rong_msg_list2: [],
                group_list: [],
                rong_msg_list3: [],
                group_list2: [],
                num: 0,
                numLength: 0,
                numCS: 0,
                resultLength: ''
            },
            filters: {
                time: function(val) {
                    var nowDate = new Date()
                    var nowYear = nowDate.getFullYear()
                    var nowMonth = nowDate.getMonth()
                    var nowDay = nowDate.getDate()
                    var nowWeek = nowDate.getDay()
                    var nowHour = nowDate.getHours()
                    var nowMinutes = nowDate.getMinutes()
                    var nowSeconds = nowDate.getSeconds()

                    var date = new Date(val)
                    var year = date.getFullYear()
                    var month = date.getMonth()
                    var day = date.getDate()
                    var week = date.getDay()
                    var hour = date.getHours()
                    var minutes = date.getMinutes()
                    var seconds = date.getSeconds()

                    if (nowYear > year) {
                        return year + '-' + (month + 1) + '-' + day
                    } else if (nowMonth > month) {
                        return (month + 1) + '-' + day
                    } else if (nowDay > day) {
                        if (nowDay - day < 7) {
                            return (nowDay - day) + '天前'
                        } else {
                            return (month + 1) + '-' + day
                        }
                    } else if (nowHour > hour) {
                        return hour + ':' + minutes
                    } else if (nowMinutes > minutes) {
                        return (nowMinutes - minutes) + '分钟前'
                    } else {
                        return (nowSeconds - seconds) + '秒前'
                    }
                }
            },
            mounted: function() {
                $_this = this;

                api.hideProgress();

                $_this.get_all_msg();
                $_this.get_xt_msg();

                $_this.to_pullRefresh();

            },
            methods: {
                to_pullRefresh: function() {
                    var $_this = this;
                    var pullRefresh = new auiPullToRefresh({
                        container: document.querySelector('.aui-refresh-content'), //下拉容器
                        triggerDistance: 50 //下拉高度
                    }, function(ret) {
                        if (ret.status == "success") {
                            setTimeout(function() {
                                $_this.get_xt_msg();
                                $_this.get_all_msg();
                                pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                            }, 500)

                        }
                    })
                },
                // 打开对应的聊天窗口
                open_chat_win: function(type, target_name, target_id) {

                    // 获取未读消息总数
                    rong.getUnreadCountByConversationTypes({
                        conversationTypes: ['PRIVATE', 'GROUP']
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.result != 0) {
                                api.execScript({
                                    name: 'four_frame/four_index.html',
                                    script: 'add_tips_dot();'
                                });
                            } else {
                                api.execScript({
                                    name: 'four_frame/four_index.html',
                                    script: 'remove_tips_dot();'
                                });
                            }
                        }
                    })

                    // 清除当前会话的未读消息
                    rong.clearMessagesUnreadStatus({
                        conversationType: 'PRIVATE',
                        targetId: target_id
                    }, function(ret, err) {
                        // console.log(ret.status);
                    })
                    rong.clearMessagesUnreadStatus({
                        conversationType: 'GROUP',
                        targetId: target_id
                    }, function(ret, err) {
                        // console.log(ret.status);
                    })

                    api.openWin({
                        name: type + '_chat_header',
                        url: 'four_headers/' + type + '_chat_header.html',
                        pageParam: {
                            target_name: target_name,
                            target_id: target_id,
                            group_chat_id: target_id,
                            group_chat_name: target_name,
                            num: 1
                        }
                    });
                },

                //获取系统消息
                get_xt_msg: function() {
                    var $_this = this;
                    // 调用系统消息接口
                    api.ajax({
                        url: window.Url.Community_chat,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token')
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {

                            if (ret.re == 1) {
                                $_this.xt_msg = ret.data.information;
                            } else {
                                api.toast({
                                    msg: ret.info,
                                    duration: 2000,
                                    location: 'bottom'
                                });

                            }
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                },

                // 获取列表数据
                get_all_msg: function(cs) {
                    var $_this = this;
                    // 获取会话列表
                    rong.getConversationList(function(ret, err) {
                        if (ret.status == 'success') {
                            // console.log('融云获取到的会话列表数据---' + JSON.stringify(ret));
                            $_this.rong_msg_list = ret.result;
                            $_this.rong_msg_list2 = []
                            $_this.group_list = []
                                // 遍历所有的会话列表 根据id获取对方的详细资
                            $_this.resultLength = ret.result.length
                            $_this.numLength = ret.result.length
                            for (var i = 0; i < ret.result.length; i++) {
                                var ajax_url;
                                var post_valuse;
                                (function() {
                                    //判断请求的类型
                                    if(ret.result[i].targetId.slice(0,1) != 'S') {
                                    if (ret.result[i].conversationType == "PRIVATE") {
                                        ajax_url = window.Url.Community_getUserDetails;
                                        post_valuse = {
                                            token: $api.getStorage('user_data').token,
                                            user_id: ret.result[i].targetId
                                        }

                                        var x = i;
                                        api.ajax({
                                            url: ajax_url,
                                            method: 'post',
                                            data: {
                                                values: post_valuse
                                            }
                                        }, function(ret, err) {
                                            if (ret) {
                                                if (ret.re == 1) {
                                                    $_this.rong_msg_list[x].datas = ret.data;
                                                    $_this.rong_msg_list2.push($_this.rong_msg_list[x]);
                                                    $_this.num++;
                                                    // console.log('单聊会话的数据----'+JSON.stringify($_this.rong_msg_list2));
                                                    if ($_this.num == $_this.resultLength) {
                                                        $_this.rong_msg_list3 = $_this.rong_msg_list2;
                                                        $_this.group_list2 = $_this.group_list;
                                                        $_this.num = 0;
                                                        cs++
                                                        if(cs < $_this.numLength) { $_this.get_all_msg(cs); }
                                                    }
                                                }
                                            } else {
                                                alert(JSON.stringify(err));
                                            }
                                        });
                                    } else {
                                        ajax_url = window.Url.Community_groupchatDetails;
                                        post_valuse = {
                                            token: $api.getStorage('user_data').token,
                                            groupchat_id: ret.result[i].targetId,
                                            keywords: ""
                                        }

                                        var x = i;
                                        api.ajax({
                                            url: ajax_url,
                                            method: 'post',
                                            data: {
                                                values: post_valuse
                                            }
                                        }, function(ret, err) {
                                            if (ret) {
                                                if (ret.re == 1) {
                                                    $_this.rong_msg_list[x].datas = ret.data;
                                                    $_this.group_list.push($_this.rong_msg_list[x]);
                                                    $_this.num++;
                                                    // console.log('群聊会话的数据----' + JSON.stringify($_this.group_list));
                                                    if ($_this.num == $_this.resultLength) {
                                                        $_this.rong_msg_list3 = $_this.rong_msg_list2;
                                                        $_this.group_list2 = $_this.group_list;
                                                        $_this.num = 0;
                                                        cs++
                                                        if(cs < $_this.numLength) { $_this.get_all_msg(cs); }
                                                    }
                                                }
                                            } else {
                                                alert(JSON.stringify(err));
                                            }
                                        });
                                    }
                                  }else {
                                    $_this.num++;
                                    if ($_this.num == $_this.resultLength) {
                                        $_this.rong_msg_list3 = $_this.rong_msg_list2;
                                        $_this.group_list2 = $_this.group_list;
                                        $_this.num = 0;
                                        cs++
                                        if(cs < $_this.numLength) { $_this.get_all_msg(cs); }
                                    }
                                  }
                                })()
                            } // 遍历所有的会话列表 根据id获取对方的详细资  -----  结束
                        }
                    });
                }
            }

        })


    };


    // 打开搜索窗口
    function open_search_win() {
        api.openWin({
            name: 'search_one_header',
            url: 'four_headers/search_one_header.html',
            pageParam: {
                name: 'test'
            }
        });
    }


    function shuaxin() {
        xt_msg_list.get_all_msg();
        // window.location.reload()
    }


    // 打开对应页面的头部
    function open_new_win(index, title, right_txt, img_src) {
        api.openWin({
            name: 'four_' + index + "header",
            url: './four_headers/four_' + index + '_header.html',
            pageParam: {
                title: title,
                right_txt: right_txt,
                img_src: img_src
            }
        });

        if (title == "添加新的朋友" || title == "建立群聊" || title == "扫一扫") {
            $('.cover').hide();
            $('.menu_box').hide();
            //执行底部页面的删除遮罩方法
            api.execScript({
                script: 'remove_cover();'
            });
        }
    }
</script>

</html>
